<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="js/vue.global.prod.js"></script>
<script type="text/javascript" src="js/axios.min.js"></script>
<body style="width: 100%">
<div style="border: 1px solid coral;width: 400px;margin: auto;height: 300px" id="erer">
    <form method="post" enctype="multipart/form-data">
        <div style="width: 300px;border: darkgray solid 1px;margin: auto;margin-top: 30px;text-align: center">增加标准信息
        </div>
        <div style="width: 300px;border: darkgray solid 1px;margin: auto">
            <div style="display: flex">

                <div>标准号</div>
                <div><input v-model="name"/></div>

            </div>
            <div style="display: flex">
                <div>中文名称</div>
                <div><input v-model="zhname"/></div>
            </div>
            <div style="display: flex">
                <div>版本</div>
                <div><input v-model="version"/></div>
            </div>
            <div style="display: flex">
                <div>关键词</div>
                <div><input v-model="keys"/></div>
            </div>
            <div style="display: flex">
                <div>发布日期</div>
                <div><input v-model="ksdate"/></div>
            </div>
            <div style="display: flex">
                <div>实施日期</div>
                <div><input v-model="jsdate"/></div>
            </div>
            <div style="display: flex">
                <div>附件</div>
                <input name="file" type="file" ref="file"  v-model="file">
            </div>
            <button type="submit" @click="add">保存</button>
            <button>取消</button>
        </div>
    </form>
</div>
</body>
<script type="text/javascript">
    function getUrlParam(name) {
//构造一个含有目标参数的正则表达式对象
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
//匹配目标参数
        var r = window.location.search.substr(1).match(reg);
//返回参数值
        if (r != null) {
            return decodeURI(r[2]);
        }
        return null;
    }

    let id = getUrlParam('id');

    const App = {
        data() {
            return {
                id: 0,
                name: '',
                zhname:'',
                version:'',
                keys:'',
                ksdate:'',
                jsdate:'',
                path:'',
                file: '',
                // options: []// 字符串数组
            }
        },
        created() {
            axios.get(`/api/update/${id}`).then((respomse) => {
                this.id = respomse.data.id;
                this.name = respomse.data.name;
                this.zhname = respomse.data.zhname;
                this.version = respomse.data.version;
                this.keys = respomse.data.keys;
                this.ksdate = respomse.data.ksdate;
                this.jsdate = respomse.data.jsdate;
                this.path = respomse.data.path;
                // this.file = respomse.data.path;
                //ES6方法，将对象的属性提取出来独立成一个数组
                // this.options = respomse.data.optionVos.map(x => x.voteOption);
            })
        },
        methods: {
            add(e) {
                e.preventDefault();
                let forms  = new FormData();
                forms.append("file",this.$refs.file.files[0]);
                forms.append("name", this.name)
                forms.append("zhname", this.zhname)
                forms.append("version", this.version)
                forms.append("keys", this.keys)
                forms.append("ksdate", this.ksdate)
                forms.append("jsdate", this.jsdate)
                forms.append("path", this.path)
                forms.append("id", this.id)
                var configs = { // 上传文件 请求头要设置成下面这样
                    headers:{'Content-Type':'multipart/form-data'}
                };
                axios.post(`/api/update/${id}`,forms,configs)
                    .then((response) => {
                        // console.log(formData);
                        // console.log(this.id, this.name, this.zhname, this.version,this.keys,this.ksdate,this.jsdate,this.path);
                        // alert(1);
                        // location.href = "view.html?id=" + this.id
                    },err=>{
                        alert("错误")
                    })
            },
            // AddOption() {
            //     this.options.push('');
            // },
            // DelOption(index) {
            //     this.options.splice(index, 1)
            // }
        }
    };
    Vue.createApp(App).mount('#erer');
</script>
</html>